import { StyleSheet, TextStyle, ViewStyle, ImageStyle } from 'react-native';
import { wp, hp, fs } from './ResponsiveUtils';

type NamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };

/**
 * 创建响应式样式表
 * 
 * 用法示例:
 * const styles = createResponsiveStyles({
 *   container: {
 *     width: wp(100),
 *     height: hp(200),
 *     padding: wp(10),
 *   },
 *   text: {
 *     fontSize: fs(16),
 *   }
 * });
 */
export function createResponsiveStyles<T extends NamedStyles<T>>(
  styles: T | NamedStyles<T>
): T {
  return StyleSheet.create(styles);
}

/**
 * 创建设备特定样式
 * 
 * 用法示例:
 * const containerStyle = createDeviceStyles({
 *   base: {
 *     padding: wp(10),
 *   },
 *   phone: {
 *     width: wp(300),
 *   },
 *   tablet: {
 *     width: wp(600),
 *   },
 *   portrait: {
 *     height: hp(200),
 *   },
 *   landscape: {
 *     height: hp(100),
 *   }
 * }, currentDeviceInfo);
 */
export function createDeviceStyles<T extends object>(
  styleObj: {
    base?: T,
    phone?: T,
    tablet?: T,
    portrait?: T,
    landscape?: T,
  },
  {
    isTablet,
    orientation,
  }: {
    isTablet: boolean,
    orientation: 'PORTRAIT' | 'LANDSCAPE',
  }
): T[] {
  const result: T[] = [];
  
  // 添加基础样式
  if (styleObj.base) {
    result.push(styleObj.base);
  }
  
  // 添加设备类型样式
  if (isTablet && styleObj.tablet) {
    result.push(styleObj.tablet);
  } else if (!isTablet && styleObj.phone) {
    result.push(styleObj.phone);
  }
  
  // 添加屏幕方向样式
  if (orientation === 'PORTRAIT' && styleObj.portrait) {
    result.push(styleObj.portrait);
  } else if (orientation === 'LANDSCAPE' && styleObj.landscape) {
    result.push(styleObj.landscape);
  }
  
  return result;
} 